import { BellOutlined } from "@ant-design/icons";
import { useEmotionCss } from "@ant-design/use-emotion-css";
import { Avatar, theme, Button, Divider, Empty, List, Popover, Segmented } from "antd";
import classNames from "classnames";
import { useRef, useState } from "react";
import React from "react";
const { getDesignToken, useToken } = theme;
const globalToken = getDesignToken();
const EmptyNotice = () => {
	return (
		<div
			style={{
				height: "100%",
				display: "flex",
				justifyContent: "center",
				alignItems: "center"
			}}
		>
			<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
		</div>
	);
};
const data = [
	{
		title: "告警通知"
	},
	{
		title: "设备异常"
	},
	{
		title: "系统日志"
	},
	{
		title: "导出通知"
	}
];
const switchTabs = [
	{
		label: "通知信息",
		value: "notice"
	},
	{
		label: "公告消息",
		value: "anno"
	}
];
const NotificationContent: React.FC = () => {
	const [tab, setTab] = useState<string>("notice");
	// const navigator = useNavigate();
	const cardRef = useRef(null);
	return (
		<>
			<Segmented
				options={switchTabs}
				block
				value={tab}
				// @ts-ignore
				onChange={(value: string) => setTab(value)}
			/>
			<div ref={cardRef} style={{ width: "100%", height: "calc(400px - 65px)", overflow: "auto" }}>
				{tab === "notice" && (
					<React.Fragment>
						<List
							itemLayout="horizontal"
							dataSource={data}
							renderItem={(item, index) => (
								<List.Item>
									<List.Item.Meta
										avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
										title={<a href="javascriot:;">{item.title}</a>}
										description="Ant Design, a design language for background applications, is refined by Ant UED Team"
									/>
								</List.Item>
							)}
						/>
					</React.Fragment>
				)}
				{tab === "anno" && (
					<React.Fragment>
						<EmptyNotice />
					</React.Fragment>
				)}
			</div>
			<Divider style={{ margin: "0" }} />
			<div style={{ height: "35px", display: "flex", alignItems: "center", justifyContent: "center" }}>
				<Button
					type="link"
					onClick={() => {
						// navigator("system/notify/mynotice");
					}}
				>
					查看更多
				</Button>
			</div>
		</>
	);
};
const NotificationDropdown: React.FC = () => {
	const { token } = useToken();
	const className = useEmotionCss(({ token }) => {
		return {
			".ant-popover-inner": {
				padding: "12px 12px 0px 12px"
			},
			paddingBottom: "0",
			width: "350px",
			[`@media screen and (max-width: ${token.screenXS})`]: {
				width: "100%"
			}
		};
	});

	return (
		<Popover
			placement="bottomRight"
			arrow={false}
			content={() => <NotificationContent />}
			trigger={["click"]}
			overlayInnerStyle={{ marginTop: "15px" }}
			overlayClassName={classNames(className)}
		>
			<Button type="text" icon={<BellOutlined style={{ fontSize: "16px" }} />} />
		</Popover>
	);
};

export default NotificationDropdown;
